<!--     用户的信息组件 -->
<template>
  <view class="my-userinfo-container">
    <!-- 头像和昵称区域 -->
    <view class="top-box">
      <image :src="userinfo.avatarUrl" class="avatar" mode=""></image>
      <view class="nickname">
        {{userinfo.nickName}}
      </view>
    </view>
    <!-- 面板区域 -->
    <view class="panel-list">
      <!-- 第1个面板 -->
      <view class="panel">
        <view class="panel-body">
          <view class="panel-item">
            <text>8</text>
            <text>收藏的店铺</text>
          </view>
          <view class="panel-item">
            <text>14</text>
            <text>收藏的商品</text>
          </view>
          <view class="panel-item">
            <text>18</text>
            <text>关注的商品</text>
          </view>
          <view class="panel-item">
            <text>84</text>
            <text>足迹</text>
          </view>
        </view>
      </view>
      <!-- 第2个面板 -->
      <view class="panel">
        <view class="panel-title">
          我的订单
        </view>
        <view class="panel-body">
          <view class="panel-item">
            <image src="/static/my-icons/icon1.png" class="icon">
            </image>
            <text>待付款</text>
          </view>
          <view class="panel-item">
            <image src="/static/my-icons/icon2.png" class="icon">
            </image>
            <text>待收货</text>
          </view>
          <view class="panel-item">
            <image src="/static/my-icons/icon3.png" class="icon">
            </image>
            <text>退款/退货</text>
          </view>
          <view class="panel-item">
            <image src="/static/my-icons/icon4.png" class="icon">
            </image>
            <text>全部订单</text>
          </view>

        </view>
      </view>
      <!-- 第3个面板 -->
      <view class="panel">
        <view class="panel-list-item">
          <text>收货地址</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text>联系客服</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item" @click="loginOut">
          <text>退出登录</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "my-userinfo",
    data() {
      return {

      };
    },
    computed: {
      ...mapState('m_user', ['userinfo', 'token'])
    },
    methods: {
      ...mapMutations('m_user', ['updateAdress', 'updateUserInfo', 'updateToken', 'clearAllData']),
      loginOut() {
        // 将 uni.showModal 封装为返回 Promise 的函数
        const showModalPromise = (options) => {
          return new Promise((resolve, reject) => {
            uni.showModal({
              ...options,
              success: (res) => {
                resolve(res);
              },
              fail: (err) => {
                reject(err);
              },
            });
          });
        };

        // 调用封装后的函数
        showModalPromise({
            title: "提示：",
            content: "您确认要退出吗？",
          })
          .then((result) => {
            if (result.confirm) {
              // 1. 清除 Vuex 中的所有数据
              this.$store.commit("m_user/clearAllData");

              // 2. 延迟跳转，确保清除生效
              uni.reLaunch({
                url: "/pages/my/my", // 重新跳转到登录页面
              });
            }
          })
          .catch((error) => {
            console.error("模态框错误:", error);
          });
      }




    }
  }
</script>

<style lang="scss">
  .top-box {
    background-color: #C00000;
    height: 220px;

    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      margin-top: 20px;
    }
  }

  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;

      .panel-list-item {
        height: 30px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
      }

      .panel-title {
        line-height: 45px;
        padding-left: 10px;
        font-size: 15px;
        border-bottom: 1px solid #F4F4F4;
      }

      .panel-body {
        display: flex;
        justify-content: space-around;
      }

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 10px 0;
        font-size: 13px;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
</style>